import { Dropdown, MenuProps } from 'antd'
import { items } from './BasicMenu'
import { Avatar, BreadcrumbItem, Breadcrumbs } from '@nextui-org/react'
import { usePathname, useRouter } from 'next/navigation'
import React from 'react'

const MobileMenu = ({ currentMenuItem }: { currentMenuItem: any }) => {
  const { push } = useRouter()
  const pathname = usePathname()

  const onClick: MenuProps['onClick'] = e => {
    console.log('click ', e.keyPath)
    const keyPath = e.keyPath
    push(keyPath[0])
  }

  return React.useMemo(
    () => (
      <>
        <Dropdown
          menu={{ items, onClick: onClick, selectedKeys: [pathname] }}
          trigger={['click']}
        >
          {/* <NextIcon type="menu" size={16} /> */}
          <Avatar src="https://pic.imgdb.cn/item/66729435d9c307b7e9620dda.png" />
        </Dropdown>
        {currentMenuItem && (
          <Breadcrumbs variant="solid" className="ml-4">
            <BreadcrumbItem>{currentMenuItem?.label}</BreadcrumbItem>
          </Breadcrumbs>
        )}
      </>
    ),

    [items, currentMenuItem]
  )
}

export default MobileMenu
